<template>
  <div class="antv-wrapper">
    <div class="wrapper-canvas" id="wrapperShow"></div>
  </div>
</template>
<script>
  import { Graph, Shape } from '@antv/x6'
  import { configSettingShow } from './utils/antvSetting'
  
  export default {
    name: "",
    data() {
      return {
        
      }
    },
    created() {
    },
    mounted () {
   
    },
    methods: {
      // 初始化渲染画布
      initGraph(json){
        if(!this.graph) {
          this.graph = new Graph({
            container: document.getElementById('wrapperShow'),
            ...configSettingShow(Shape)
          })
        }        // 返现方法
        if(json.length){
          this.graph.fromJSON(json)
        }
        this.graph.centerContent()
        this.graph.zoomToFit()
      },
    }
  }
  
</script>

<style scoped="scoped">
  .antv-wrapper{
    position: relative;
    height: 50vh;
    flex: 1;
    
  }
  .wrapper-canvas{
      height: 100%;
      width: 100%;
      position: relative;
    }
    .wrapper-tips{
      padding: 10px;
      display: flex;
      align-items: center;
      position: absolute;
      top: 0;
      left: 0;
      
    }
</style>
